import * as joint from "jointjs";
let option = {
	type: "basic.customShape",
	size: {
		width: 100,
		height: 50,
	},
	attrs: {
		".body": {
			width: 100,
			height: 50,
			fill: "none",
		},
		".image-box": {
			width: 100,
			height: 50,
      // refX: 20,
			// rx: "50%",
			// ry: "50%",
		},
		// ".avatar": {
		// 	width: 80,
		// 	height: 80,
		// },
		".name-bg": {
			width: 20,
			height: 20,
			rx: 50,
			fill: "#ffcdcd",
			refX: 90,
			refY: 40,
		},
		".name": {
			fill: "#000",
			ref: ".image-box",
			textVerticalAnchor: "middle",
			textAnchor: "middle",
			refX: "50%",
			refY: "50%",
		},
		".icon": {
			fill: "#000",
			ref: ".name-bg",
			fontSize: 12,
			textVerticalAnchor: "middle",
			textAnchor: "middle",
			refX: 10,
			refY: 11,
		}
	},
	/** 对于端口的样式配置 */
	ports: {
		groups: {
			in: {
				/** 端口相对于元素的位置 */
				position: {
					name: "left",
				},
				/** 端口样式 */
				attrs: {
					".port-body circle": {
						r: 0,
						// "ref-y":20,
						fill: "#fd6d42",
					},
				},
			},
			out: {
				position: {
					name: "right",
				},
				attrs: {
					".port-body circle": {
						r: 1,
						"ref-y":10,
						fill: "#3371FC",
					},
				},
			},
		},
	},
};

let customShape = joint.shapes.basic.Generic.extend({
	markup: `<g class="rotatable">
                <g class="scalable">
                    <rect class="body" />
                </g>
                <g>
                    <rect class="image-box" />
					<text class="name"></text>
                </g>
                <g>
                    <rect class="name-bg" />
                    <text class="icon"></text>
                </g>
            </g>`,
	/** 在这里进行对port结构的定义，在这里定义成了圆形 */
	portMarkup: `<g class="port-body">
  <circle></circle>
</g>`,
	/** option的定义见下方 */
	defaults: joint.util.defaultsDeep(
		option,
		joint.shapes.basic.Generic.prototype.defaults
	),
	initialize: function () {
		this.on(
			"change:label",
			function () {
				this.updateRectangles();
			},
			this
		);
		this.updateRectangles();
		joint.shapes.basic.Generic.prototype.initialize.apply(this, arguments);
		/** 初始化里添加关于端口属性改变的监听以及方法调用 */
		this.on("change:inPorts change:outPorts", this.updatePortItems, this);
		this.updatePortItems();
	},
  updateRectangles() {
		const attrs = this.get("attrs");
		const rect = { label: this.get("label"), image: this.get("image") };
		attrs[".name"].text = rect.label;
		attrs[".icon"].text = 'X';
	},
	/** 端口的相关函数 */
	updatePortItems(model, changed, opt) {
		/** 确保每个端口都是唯一的 */
		const inPorts = joint.util.uniq(this.get("inPorts"));
		const outPorts = joint.util.difference(
			joint.util.uniq(this.get("outPorts")),
			inPorts
		);

		const inPortItems = this.createPortItems("in", inPorts);
		const outPortItems = this.createPortItems("out", outPorts);

		this.prop(
			"ports/items",
			inPortItems.concat(outPortItems),
			joint.util.assign({ rewrite: true }, opt)
		);
	},
	createPortItem(group, port) {
		return {
			id: port,
			group,
		};
	},

	createPortItems(group, ports) {
		return joint.util.toArray(ports).map(this.createPortItem.bind(this, group));
	},
});

export default customShape;
